<template>
	<view class="ifun-ui calendar-month" :class="{'current-month':isNowMonth}">
		<!-- <view class="calendar-header" v-if="showHeader">
			<slot name="header" v-bind="{title,date}">
				<text class="date title">{{title}}</text>
			</slot>
		</view> -->
		<view class="calendar-body">
			<view class="calendar-weeks">
				<text class="week-item" v-for="item in weeks" :key="item">{{item}}</text>
			</view>
			<view class="calendar-day">
				<view class="day-item" @click="handleSelect(item)"
					:class="{'current-day':isNowDay(item),active:item==selectedDay}" v-for="(item,index) in days"
					:key="item+'_'+index">
					<text>{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// showHeader: {
			// 	type: Boolean,
			// 	default: true
			// },
			selected: String,
			date: {
				type: Date,
				default: () => new Date()
			}
		},
		data() {
			this.weeks = ['日', '一', '二', '三', '四', '五', '六'];
			return {
				days: [],
				title: "",
				selectedDay: ""
			}
		},
		computed: {
			isNowMonth() {
				let now = new Date();
				const [year, month] = [
					this.date.getFullYear(),
					this.date.getMonth(),
				];

				return now.getFullYear() == year && now.getMonth() == month
			},

		},
		watch: {
			selected:{
				immediate:true,
				handler(val){
					// 默认的选中日期
					this.formatSelectedDay();
				}
				
			},
			date: {
				immediate: true,
				deep: true,
				handler() {
					this.init();
					this.formatSelectedDay();
				}
			}
		},
		methods: {
			formatSelectedDay() {
				this.selectedDay = '';
				if (!this.selected) {
					return
				}
				let dates = this.selected.split('-');
				const [year, month] = [
					this.date.getFullYear(),
					this.date.getMonth() + 1,
				];
				if(dates[0]!=year || dates[1]!=month){
					return
				}
				this.selectedDay = dates[2]
			},
			handleSelect(day) {
				if (!day) {
					return
				}
				this.selectedDay = day;
				const [year, month] = [
					this.date.getFullYear(),
					this.date.getMonth() + 1,
				];
				this.$emit('select', [year, month, day].join('-'));
			},
			isNowDay(day) {

				let now = new Date();

				return now.getDate() == day;
			},
			handleComputedDay(data) {
				const [year, month] = data

				let date = new Date(year, month, 0);
				let dayData = Array(date.getDate()).fill(0).map((val, index) => {
					return index + 1;
				})

				return dayData;
			},
			init() {

				// 当前时间
				const [year, month] = [
					this.date.getFullYear(),
					this.date.getMonth() + 1,
				];
				this.title = [year, month].join("/");
				let days = this.handleComputedDay([year, month]);

				// 根据星期几，填充前几位
				this.date.setDate(1);
				
				let week = this.date.getDay();
				
				let prefixFill = Array(week).fill();
				// 填充末尾位置
				let suffix = (week + days.length) % 7;
				let suffixFill = suffix > 0 ? Array(7 - suffix).fill() : [];
				this.days = [...prefixFill, ...days, ...suffixFill]
			},
		}
	}
</script>

<style lang="less" scoped>
	.calendar-month {
		display: flex;
		flex-direction: column;
		gap: 10px;

		&.current-month {
			.calendar-day {
				.day-item {
					&.current-day:not(.active) {
						color: rgba(54, 121, 255, 1);
					}
				}
			}
		}

		.calendar-body {
			display: flex;
			flex-direction: column;
			font-size: 14px;

			.calendar-weeks {
				display: grid;
				grid-template-columns: repeat(7, 1fr);
				border-bottom: 1px solid rgba(129, 134, 143, 0.10);
				color: #81868F;

				.week-item {
					flex: 1;
					padding: 5px 0;
					text-align: center;
				}
			}
		}

		.calendar-day {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			color: #111111;

			.day-item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8px;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					width: 100%;
					height: 1px;
					background: rgba(129, 134, 143, 0.1);
					left: 0;
					bottom: 0;
				}

				&.active {
					background: rgba(54, 121, 255, 1);
					color: #fff;
				}
			}
		}
	}
</style>